import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Line } from '@ant-design/plots';

const DemoLine = (prop: any) => {
  // const [data, setData] = useState([]);

  // useEffect(() => {
  //     asyncFetch();
  // }, []);

  // const asyncFetch = () => {
  //     fetch('https://gw.alipayobjects.com/os/bmw-prod/e00d52f4-2fa6-47ee-a0d7-105dd95bde20.json')
  //         .then((response) => response.json())
  //         .then((json) => setData(json))
  //         .catch((error) => {
  //             console.log('fetch data failed', error);
  //         });
  // };
  const data = [
    {
      name: '论文',
      year: '2009',
      gdp: 51,
    },
    {
      name: '论文',
      year: '2010',
      gdp: 60,
    },
    {
      name: '论文',
      year: '2011',
      gdp: 75,
    },
    {
      name: '论文',
      year: '2012',
      gdp: 85,
    },
    {
      name: '论文',
      year: '2013',
      gdp: 95,
    },
    {
      name: '论文',
      year: '2014',
      gdp: 104,
    },
    {
      name: '论文',
      year: '2015',
      gdp: 110,
    },
    {
      name: '论文',
      year: '2016',
      gdp: 111,
    },
    {
      name: '论文',
      year: '2017',
      gdp: 121,
    },
    {
      name: '论文',
      year: '2018',
      gdp: 136,
    },
  ];
  const config = {
    data: prop.data || [],
    xField: 'YEAR',
    yField: 'NUM',
    legend: false,
    smooth: true,
    // @TODO 后续会换一种动画方式
    animation: {
      appear: {
        animation: 'path-in',
        duration: 5000,
      },
    },
    // style: {
    //     width: "100%",
    // }
    tooltip: {
      showTitle: false,
      formatter: (datum: any) => {
        return {
          name: datum['YEAR'],
          value: datum['NUM'],
        };
      },
    },
  };

  return <Line {...config} />;
};

export default DemoLine;
